<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input id="user" type="text">
    <span></span>
</body>
<script>
    // 用户名 中英文均可 14个英文或7个汉字
    // var reg = /^([a-zA-Z]{1,14}|[\u4e00-\u9fa5]{1,7})$/


    // 如果一个英文占一个字节,一个中文占两个自己 => 问字符串共计多少字节
    var userInp = document.getElementById("user");
    userInp.onblur = function () {
        var user = this.value;
        console.log(user.length);

        var span = this.nextElementSibling;

        // 遍历每一个字符 判断是中文加2 否则加1
        // var reg = /[\u4e00-\u9fa5]/;
        // var count = 0;
        // for (var i = 0; i < user.length; i++) {
        //     var char = user.charAt(i);// 获取对应下标的字符
        //     if (reg.test(char)) {
        //         count += 2
        //     } else {
        //         count++;
        //     }
        // }
        // span.textContent = count;

        // 方法2 
        // user.length  => 无论中英文 数字 都是1  => 中文少算一个  

        // 取出所有中文 => 有多少就少算多少
        var reg = /[\u4e00-\u9fa5]/g;
        var arr = user.match(reg);
        var count = user.length;
        if (arr) {
            count += arr.length;
        }
        console.log(count);

    }




</script>

</html>